<!DOCTYPE html>
<html lang="en">
	<head>
  		<meta charset="utf-8">
  		<title>Microsoft Explorer 9</title>
     	<link href="css/style5.css" rel="stylesheet" type="text/css" />
		<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  	</head>
		<body>
	
			 <!--[Header]-->
		    <header>	
				<div class="text-center">
					<h1 id="logo"><img src="images/logo.png" alt="" /></h1>	
				</div>
			</header>
		    <!--[/Header]-->
		    
		    
			 <!--[Nav]-->	   
			<nav>
				<div id="div-nb-exp"><span id="nbExpNum"></div>
			    <div id="mainNav">
					<ul>
				       <li><a href="index.html">HOME</a></li>
				       <li><a href="localStorage.html">Local Storage</a></li>
				       <li><a href="sessionStorage.html">Session Storage</a></li>
				       <li><a href="canvas.html">Canvas</a></li>
				       <li><a href="audioVideo.html">Video</a></li>
				       <li><a href="browser.html">Browser</a></li>
					</ul>
				</div>
			</nav>
			<!--[/Nav]-->	
		    			
    		<!--[Section]-->
    			
    		<section id="content">
				<div id="content-body">
					<div class="text-content">
						<div style="text-align:center;">
							<textarea id="ta" rows="10" cols="50"></textarea>
							<br />
							<br />
							<button id="saveIntoLocalStorage">
								Save in session storage
							</button>
							<button id="clearTheStorage">
								Clear the session storage
							</button>
							<p id="ta-log"></p>
						</div>
					</div>
					<div class="text-content">
						<p>Seguimi su <a href="http//www.twitter.com/imperugo">TWITTER</a></p>
					</div>
				</div>
				<div class="clear"></div>
				<script type="text/javascript">
					var area = document.getElementById('ta');

					function ReadCache() {
						var key = 'myKey';

						if (sessionStorage && sessionStorage.getItem(key)) {
							// Using JSON to deserialize the content
							var value = JSON.parse(sessionStorage.getItem(key));

							return value == undefined ? '' : value;
						}

						return '';
					}

					function SaveCache(value) {
						var key = 'myKey';

						if (sessionStorage && value) {
							// Using JSON to serialize the content to string
							var serialized_value = JSON.stringify(value);
							sessionStorage.setItem(key, serialized_value);
						}
					}


					function ClearCache() {
						if (sessionStorage) {
							sessionStorage.clear();
						}
					}

					function updateLog(new_save) {
						var log = document.getElementById("ta-log");
						if (new_save) {
								log.textContent = 'Saved. Content will be available after browser refresh/reopen.';
								setTimeout(function () {
									log.textContent = '';
								}, 3000);
						}
					}

					$(document).ready(function () {

						$('#saveIntoLocalStorage').click(function () {
							SaveCache(area.innerHTML);
							updateLog(true);
						});

						$('#clearTheStorage').click(function () {
							ClearCache();
							area.innerHTML = '';
							updateLog(true);
						});

						if (!area.value) {
							area.innerHTML = ReadCache();
							updateLog(false);
						}
					});

				</script>
			</section>
    		<!--[/Section]-->

	    	<!--[Footer]-->
			<footer>
				<div class="footerbot">
					<span class="floatleft">
						<a href="http://tostring.it/">Imperugo</a></span><span class="floatright"><a href="http://twitter.com/imperugo" class="hide">Twitter</a> 
					<a href="http://tostring.it/contacts">Contact</a></span>
				</div>
			</footer>
			<!--[/Footer]-->
		</body>
</html>